<template>
  <view class="activity-page">
    <view class="list-bg"> </view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <view>
          <mt-navbar title="易盟活动" :show-back="false" bg-color="rgba(0,0,0,0)">
            <template #left>
              <image
                class="w-48rpx h-48rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-question-circle.svg"
                @click="openModal"
              ></image>
            </template>
            <template v-if="user.userInfo.serviceProviderFlag" #center>
              <view class="flex items-center pr-32rpx ml-110rpx box-border" style="width: calc(100% - 110rpx)">
                <view class="tabs">
                  <view class="tab text-32rpx text-#727687" :class="{ active: type === 1 }" @click="handleChangeType(1)">活动报名</view>
                  <view class="tab text-32rpx text-#727687" :class="{ active: type === 2 }" @click="handleChangeType(2)">活动分享</view>
                </view>
                <!--暂时屏蔽消息模块-->
                <!-- <mt-message-bell> </mt-message-bell> -->
              </view>
            </template>
            <template v-if="!user.userInfo.serviceProviderFlag" #right>
              <!--暂时屏蔽消息模块-->
              <!-- <mt-message-bell> </mt-message-bell> -->
            </template>
          </mt-navbar>
        </view>
      </template>

      <view class="px-32rpx pt-16rpx">
        <view v-for="item in dataList" :key="item.id" class="flex items-start mb-16rpx p-24rpx bg-#ffffff rd-8rpx" @click="goDetail(item)">
          <view class="w-330rpx h-220rpx relative mr-16rpx">
            <image class="w-full h-full rd-8rpx" :src="item.coverFile[0].url"></image>
            <view
              v-if="item.warningTime.d < 1"
              class="absolute right-0 top-0 bg-#F94B4A text-#ffffff text-24rpx px-16rpx py-8rpx"
              style="border-radius: 0 8rpx 0 30rpx"
              >即将截止</view
            >
          </view>
          <view class="flex-1 min-w-0">
            <view class="clamp2 min-h-80rpx text-28rpx text-#1C213E font-bold mb-8rpx line-height-42rpx">{{ item.activityName }}</view>
            <view class="flex items-center justify-between h-32rpx mb-16rpx">
              <text class="text-24rpx text-#727687">{{ dayjs(item.startTime).format('MM/DD') }} {{ dayjs(item.startTime).format('ddd') }}</text>
            </view>
            <view class="h-32rpx text-24rpx text-#727687 mb-16rpx">{{ item.addressShowStatus === 1 ? item.city : '' }}</view>
            <view v-if="item.warningTime.d > 30" class="flex items-center">
              <uv-icon name="clock" color="#1484EE" size="30rpx"></uv-icon>
              <text class="text-24rpx text-#1484EE ml-8rpx">{{ dayjs(item.warningTime.endtime).format('YYYY-MM-DD') }}截止</text>
            </view>
            <view v-if="item.warningTime.d > 2 && item.warningTime.d <= 30" class="flex items-center">
              <uv-icon name="clock" color="#1484EE" size="30rpx"></uv-icon>
              <text class="text-24rpx text-#1484EE ml-8rpx">{{ item.warningTime.d }}天后截止</text>
            </view>
            <view v-if="item.warningTime.d >= 1 && item.warningTime.d <= 2" class="flex items-center">
              <uv-icon name="clock" color="#F94B4A" size="30rpx"></uv-icon>
              <text class="text-24rpx text-#F94B4A ml-8rpx">{{ item.warningTime.d }}天后截止</text>
            </view>
            <view v-if="item.warningTime.d < 1 && item.warningTime.h > 0" class="flex items-center">
              <uv-icon name="clock" color="#F94B4A" size="30rpx"></uv-icon>
              <text class="text-24rpx text-#F94B4A ml-8rpx">{{ item.warningTime.h }}小时后截止</text>
            </view>
            <view v-if="item.warningTime.d < 1 && item.warningTime.h < 1 && item.warningTime.m > 0" class="flex items-center">
              <uv-icon name="clock" color="#F94B4A" size="30rpx"></uv-icon>
              <text class="text-24rpx text-#F94B4A ml-8rpx">{{ item.warningTime.m }}分钟后截止</text>
            </view>
          </view>
        </view>
      </view>

      <template #bottom>
        <mt-tabbar :current="3"></mt-tabbar>
      </template>
    </z-paging>

    <mt-modal ref="modalRef">
      <view class="modal-tips">
        <view class="flex">
          <view class="line flex">
            <view class="line-left"></view>
            <text class="px-24rpx text-#1A1A1A text-32rpx font-bold">分享说明</text>
            <view class="line-right"></view>
          </view>
        </view>
        <view class="text-#727687 text-28rpx mt-30rpx">分享活动，获得返佣！返佣金额以实际签到到场用户为准！</view>
      </view>
    </mt-modal>
  </view>
</template>

<script setup>
import { activitygetAppActivityPage, activitygetAppActivitySharePage } from '@/api/mixed';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import userStore from '@/store/user';
const user = userStore();

dayjs.locale('zh-cn');

const type = ref(1); // 1 活动报名 2 活动分享
function handleChangeType(num) {
  type.value = num;
  pagingRef.value.reload();
}

function goDetail(item) {
  if (user.userInfo.serviceProviderFlag) {
    if (type.value === 1) {
      uni.navigateTo({
        url: `/subActivity/pages/serviceDetail?id=${item.id}&type=1`
      });
    } else if (type.value === 2) {
      uni.navigateTo({
        url: `/subActivity/pages/serviceDetail?id=${item.id}&type=2`
      });
    }
  } else {
    uni.navigateTo({
      url: `/subActivity/pages/serviceDetail?id=${item.id}&type=2`
    });
  }
}

const modalRef = ref();
function openModal() {
  modalRef.value.open({
    showTitle: false,
    slot: true,
    showCancel: false
  });
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value
    };

    let res = '';
    if (user.userInfo.serviceProviderFlag) {
      if (type.value === 1) {
        res = await activitygetAppActivityPage(params);
      } else if (type.value === 2) {
        res = await activitygetAppActivitySharePage(params);
      }
    } else {
      res = await activitygetAppActivitySharePage(params);
    }

    const list = res.data?.items || [];

    for (const item of list) {
      if (user.userInfo.serviceProviderFlag) {
        if (type.value === 1) {
          item.warningTime = handleTime(item.serviceProviderDeadline);
        } else if (type.value === 2) {
          item.warningTime = handleTime(item.customerDeadline);
        }
      } else {
        item.warningTime = handleTime(item.customerDeadline);
      }
    }

    lastId.value = list[list.length - 1]?.id;

    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

function handleTime(endtime) {
  const obj = {
    endtime,
    d: 0,
    h: 0,
    m: 0,
    s: 0
  };

  const targetDate = new Date(endtime).getTime();
  const now = new Date().getTime();

  if (now > targetDate) {
    return obj;
  }

  const timeDifference = targetDate - now;

  obj.d = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  obj.h = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  obj.m = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  obj.s = Math.floor((timeDifference % (1000 * 60)) / 1000);

  return obj;
}

onShow(() => {
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

<style lang="scss" scoped>
.list-bg {
  height: 620rpx;
  background: linear-gradient(136deg, rgba(20, 132, 238, 0.1) 0%, rgba(20, 132, 238, 0) 57%);
}
.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  .tab {
    position: relative;
    margin-right: 40rpx;
    &.active {
      font-size: 40rpx;
      color: #1c213e;
      font-weight: bold;
    }
    &.active::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -16rpx;
      transform: translateX(-50%);
      width: 54rpx;
      height: 8rpx;
      border-radius: 20rpx;
      background: linear-gradient(to right, rgba(20, 132, 238, 1), rgba(20, 132, 238, 0.1) 80%);
    }
  }
}
.activity-page {
  :deep(.mt-modal) {
    .mt-modal-body {
      padding: 0 !important;
    }
  }
}
.modal-tips {
  padding: 40rpx 32rpx 30rpx 32rpx;
  background: linear-gradient(to bottom, rgba(29, 138, 241, 0.05), rgba(29, 138, 241, 0) 60%);
  .line {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0 18%;
    .line-left {
      width: 22%;
      border-radius: 0px 0px 0px 0px;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, rgba(20, 132, 238, 0), rgba(20, 132, 238, 1)) 1 1;
    }
    .line-right {
      width: 22%;
      border-radius: 0px 0px 0px 0px;
      border-bottom: 1px solid;
      border-image: linear-gradient(90deg, rgba(20, 132, 238, 1), rgba(217, 185, 151, 0)) 1 1;
    }
  }
}
</style>
